<template lang="html">
  <a-layout class="list-page">
    <div class="banner">
      <!-- <img src="@/assets/banner3.png" alt=""> -->
    </div>
    <a-layout-content>
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item @click.native="$router.push({path: '/'})">首页</a-breadcrumb-item>
        <a-breadcrumb-item @click.native="$router.push({path: $route.query.parentURL})">{{$route.query.parentTitle}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{breadcrumbTitle}}</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout style="background: #f1f2f4;align-items: flex-start;">
        <a-layout-sider width="200" style="margin-right: 24px;">
          <a-menu
            v-model="current"
            mode="inline"
            :defaultSelectedKeys="['1']">
            <a-menu-item v-for="menu in menus" :key="menu.key" @click.native="loadData(menu)">
              <!-- <router-link :to="{ name: menu.url, params: {} }">
                <icon :type="menu.icon" />
              </router-link> -->
              <span v-html="menu.title"></span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <div class="list-wrapper">
          <a-layout class="table" style="background: #fff;">
            <div class="table-list">
              <ul class="list__content">
                <li class="list__content-item" v-for="item in listData" @click="goDetail(item, listData)">
                  <div class="item__title" v-html="item.FTitle"></div>
                  <div class="item__date" v-html="item.FDate"></div>
                </li>
              </ul>
            </div>
          </a-layout>
          <a-pagination
            :total="totalSize"
            :showTotal="total => `共 ${total} 条`"
            :pageSize="14"
            :defaultCurrent="1" />
        </div>
    </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {invoke} from "@/api";
export default {
  computed: {
    breadcrumbTitle() {
      return this.$route.query.FTitle
    }
  },
  data() {
    return {
      current: ["1"],
      menus: [],
      banners: [],
      listData: [],
      totalPage: "",
      totalSize: Number
    };
  },
  mounted() {
    this.setMenu()
  },
  methods: {
    loadData(menu) {
      this.$nextTick(() => {
        invoke(_.isEmpty(menu) ? this.menus[0].api : menu.api,{
          pageCode: "WTM.TopNews.List",
          pageSize: 14,
          type: this.$route.query && this.$route.query.type
        }).then((res) => {
          this.listData = []
          this.listData = res.records
          // if (res.totalSize < 14 || res.totalSize === 14) {
          //   this.totalPage = "1"
          // } else {
          this.totalSize = res.totalSize
          this.totalPage = String(res.totalSize / 14 + 1).slice(0, 1)
          // }
        })
        this.breadcrumbTitle = _.isEmpty(menu) ? "头条新闻" : menu.title
      })
    },
    setMenu() {
      const vm = this
      switch (vm.$route.query.parentURL) {
        case "/":
          vm.menus = []
          vm.menus = [
            {title: "头条新闻", key: "1", api: "api/WTM.TopNews.getNotCheckList", editAPI: "api/WTM.TopNews.perpareNotCheckEdit", editPageCode: "WTM.TopNews.Edit"},
            {title: "旅游动态", key: "2", api: "api/WTM.TravelDynamics.getNotCheckList", editAPI: "api/WTM.TravelDynamics.perpareNotCheckEdit", editPageCode: "WTM.TravelDynamics.Edit"},
            {title: "精彩节庆", key: "3", api: "api/WTM.WonderfulFestival.getNotCheckList", editAPI: "api/WTM.WonderfulFestival.perpareNotCheckEdit", editPageCode: "WTM.WonderfulFestival.Edit"},
          ]
          _.forEach(vm.menus, (menu) => {
            if (menu.title === this.$route.query.FTitle) {
              vm.loadData(menu)
            }
          })
          break;
        case "/government-affairs":
          vm.menus = []
          vm.menus = [
            {title: "政策法规", key: "1", api: "api/WTM.PolicyAndRegulation.getNotCheckList", editAPI: "api/WTM.PolicyAndRegulation.perpareNotCheckEdit", editPageCode: "WTM.PolicyAndRegulation.Edit"},
            {title: "工作计划", key: "2", api: "api/WTM.WorkPlan.getNotCheckList", editAPI: "api/WTM.WorkPlan.perpareNotCheckEdit", editPageCode: "WTM.WorkPlan.Edit"},
            {title: "机构职能", key: "3", api: "api/WTM.InstitutionalFunction.getNotCheckList", editAPI: "api/WTM.InstitutionalFunction.perpareNotCheckEdit", editPageCode: "WTM.InstitutionalFunction.Edit"},
          ]
          vm.loadData()
          break;
        case "/mailbox":
          vm.menus = []
          vm.menus = [
            {title: "网民问政", key: "1", api: "api/WTM.NetizenAsking.getNotCheckList", editAPI: "api/WTM.NetizenAsking.perpareNotCheckEdit", editPageCode: "WTM.NetizenAsking.Edit", type: "Advisory"},
            {title: "群众建议", key: "2", api: "api/WTM.NetizenAsking.getNotCheckList", editAPI: "api/WTM.NetizenAsking.perpareNotCheckEdit", editPageCode: "WTM.NetizenAsking.Edit", type: "Suggest"},
            {title: "我要投诉", key: "3", api: "api/WTM.NetizenAsking.getNotCheckList", editAPI: "api/WTM.NetizenAsking.perpareNotCheckEdit", editPageCode: "WTM.NetizenAsking.Edit", type: "Complaint"},
          ]
          vm.loadData()
          break;
        case "/raiders":
          vm.menus = []
          vm.menus = [
            {title: "旅游攻略", key: "1", api: "api/WTM.TravelGuide.getNotCheckList", editAPI: "api/WTM.TravelGuide.perpareNotCheckEdit", editPageCode: "WTM.TravelGuide.Edit"},
          ]
          vm.loadData()
          break;
        default:
      }
      _.forEach(vm.menus, (menu) => {
        if (menu.title === vm.$route.query.FTitle) {
          vm.current = [menu.key]
        }
      })
    },
    goDetail(item, list) {
      this.$router.push({
        path: '/info-page',
        query: {
          FId: item.FId,
          parentTitle: this.$route.query.parentTitle,
          parentURL: this.$route.query.parentURL,
          FTitle: this.menus[Number(this.current) - 1].title,
          // url: "api/WTM.NetizenAsking.perpareNotCheckEdit.vdt",
          // pageCode: "WTM.NetizenAsking.Edit",
          url: this.menus[Number(this.current) - 1].editAPI,
          pageCode: this.menus[Number(this.current) - 1].editPageCode,
          type: this.$route.query.type
        }
      })
    },
  }
}
</script>

<style lang="scss">
.list-page {
  background: rgb(241, 242, 244) !important;

  .banner {
    background-image: url('../assets/banner3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 230px;
  }

  .ant-layout-sider {
    background-color: #f1f2f4 !important;
  }

  .ant-breadcrumb {
    transition: all 0.28s ease;

    span:hover {
      color: #0666c8;
      cursor: pointer;
    }
  }

  .list-wrapper {
    width: 1000px;
    padding: 16px;
    background: #FFF;
    display: flex;
    flex-direction: column;

    .table {
      padding: 0;

      .table-list {
        width: 100%;
      }
    }

    .ant-pagination {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}
</style>
